﻿@model List<DHQGHN.PM2.Models.AreaModel>

<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

@{
    ViewBag.Title = "Quản lý địa bàn điều tra";
    ViewBag.Group = "Quản lý chung";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}
@{
    var grid = new WebGrid(canPage: true, rowsPerPage: 10, selectionFieldName: "selectedRow");
    if (Model.Count == 0)
    {
        grid.Bind(@Model, autoSortAndPage: false, rowCount: 0);
    }
    else
    {
        grid.Bind(@Model, autoSortAndPage: false, rowCount: Model[0].RECODE_COUNT);
    }
    grid.Pager(WebGridPagerModes.NextPrevious);
}

<div class="page-bar">
    <ul class="page-breadcrumb" style="padding: 4px;">
        <li>
            <i class="fa fa-home"></i>
            <a href="#"> Quản lý địa bàn điều tra</a>
        </li>
    </ul>
</div>

@using (Html.BeginForm("IndexArea", "Area", FormMethod.Post))
{
    @Html.AntiForgeryToken();
    <div class="row" style="margin-bottom:10px;">
        <div class="col-md-4" style="margin-top:5px;">
            <div class="row">
                <div class="col-md-4">
                    @Html.Label("Mã địa bàn")
                </div>
                <div class="col-md-8">
                    @Html.TextBox("AREA_CODE", "", new { @class = "form-control  input-sm", style = "", @MaxLength = 13 })
                </div>
            </div>
        </div>
        <div class="col-md-4" style="margin-top:5px;">
            <div class="row">
                <div class="col-md-4">
                    @Html.Label("Tên địa bàn")
                </div>
                <div class="col-md-8">
                    @Html.TextBox("AREA_NAME", "", new { @class = "form-control  input-sm", style = "", @MaxLength = 255 })
                </div>
            </div>
        </div>
        <div class="col-md-4" style="margin-top:5px;">
            <div class="pull-right">
                <button type="submit" class="btn btn-sm btn-default btn_search_household" value="Tìm Kiếm"><i class="fa fa-search"></i> Tìm Kiếm</button>
                <button type="button" class="btn btn-sm btn-default btn_search_household" title="In danh sách địa bàn ra file excel"
                        value="Kết xuất Excel"
                        onclick="window.location.href = '@Url.Action("ExportData", "Area")';">
                    <i class="fa fa-file-excel-o"></i> Xuất Excel
                </button>

                <button type="button" class="btn btn-sm btn-default btn_search_household"
                        value="Tạo mới địa bàn"
                        onclick="onCreate()">
                    <i class="fa fa-plus-square-o"></i> Tạo mới
                </button>
            </div>
        </div>
    </div>

}


<script>
    @functions{
        public string GetAntiForgeryToken()
        {
            string cookieToken, formToken;
            AntiForgery.GetTokens(null, out cookieToken, out formToken);
            return cookieToken + "," + formToken;
        }
    }

    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
    var getContentMap = function () {
        var map = $('.map_content .olMapViewport');
        var w = $(window).width();
        return { width: w, html: map.html() };
    };

    function onEdit(id) {
        //$("#divLoading").show();
        $.ajax({
            url: '@Url.Action("ViewForEdit", "Area")',
            data: {
                "Area_ID": id
            },
            type: 'POST',
            success: function (data) {
                //$("#divLoading").hide();
                var bottbox1 = bootbox.dialog({
                    title: "Thông báo bản ghi cần cập nhật",
                    message: data,
                    buttons: {
                        success: {
                            label: "<i class='fa fa-pencil-square-o' ></i> Sửa",
                            className: "btn btn-sm btn-success", //btn-success
                            callback: function () {
                                EditArea();
                                $(bottbox1).Modal('show');
                            }
                        },
                        danger: {
                            label: "<i class='fa fa-reply'></i> Hủy bỏ",
                            className: "btn btn-sm btn-default",//"btn-danger",
                            callback: function () {
                            }
                        }

                    },
                });

            }
        });
        return false;
    }

    function onCreate() {
        $.ajax({
            url: '@Url.Action("CreateAreaPartail", "Area")',
            type: 'POST',
            success: function (data) {
                var bottbox1 = bootbox.dialog({
                    title: "Tạo mới địa bàn",
                    message: data,
                    buttons: {
                        success: {
                            label: "<i class='fa fa-plus-square-o' ></i> Tạo mới",
                            className: "btn btn-sm btn-success", //btn-success
                            callback: function () {
                                CreateArea();
                                $(bottbox1).Modal('show');
                            }
                        },
                        danger: {
                            label: "<i class='fa fa-reply'></i> Hủy bỏ",
                            className: "btn btn-sm btn-default",//"btn-danger",
                            callback: function () {
                            }
                        }

                    },
                });

            }
        });
        return false;
    }


    function onView(id) {
        $.ajax({
            url: '@Url.Action("ViewForDetail", "Area")',
            data: {
                "Area_ID": id
            },
            type: 'POST',
            success: function (data) {
                bootbox.dialog({
                    title: "Thông tin bản ghi chi tiết",
                    message: data,
                    buttons: {
                        danger: {
                            label: "<i class='fa fa-reply'></i> Thoát",
                            className: "btn btn-sm btn-default",//"btn-danger",
                            callback: function () {
                            }
                        }
                    }
                });
            }
        });
        return false;
    }

    function onMap(AREA_CODE) {
        $.ajax({
            url: '@Url.Action("ViewForMapIndex", "Area")',
            data: {
                "Area_code": AREA_CODE
            },
            type: 'POST',
            success: function (data) {
                bootbox.dialog({
                    title: "Bản đồ địa bàn",
                    message: data,
                    buttons: {
                        danger: {
                            label: "<i class='fa fa-reply'></i> Thoát",
                            className: "btn btn-sm btn-default",//"btn-danger",
                            callback: function () {
                            }
                        }
                    }
                });
            }
        });
        return false;
    }

    function onDelete(id) {
        $.ajax({
            url: '@Url.Action("ViewForDelete","Area")',
            data: {
                "Area_ID": id
            },
            type: 'POST',
            success: function (data) {
                bootbox.dialog({
                    title: "Xóa địa bàn điều tra",
                    message: data,
                    buttons: {
                        success: {
                            label: "<i class='fa fa-warning' ></i> Xóa",
                            className: "btn btn-sm btn-danger", //btn-success
                            callback: function () {
                                $.ajax({
                                    url: "@Url.Action("DeleteDiaBanDTConfirmed","Area")",
                                    data: { "Area_ID": id },
                                    type: 'post',
                                    headers: {
                                        'VerificationToken': '@GetAntiForgeryToken()'
                                    },
                                    success: function (d) {
                                        setTimeout(function () { window.location.reload(true) }, 1000);
                                    },
                                    complete: function () {
                                        Layout.toastr("", "Xóa địa bàn thành công");
                                    },
                                    error: function (ex) {
                                        alert(JSON.stringify(ex));
                                    }
                                });

                            }
                        },
                        danger: {
                            label: "<i class='fa fa-reply'></i> Hủy bỏ",
                            className: "btn-sm btn-default",//"btn-danger",
                            callback: function () {
                            }
                        }
                    }
                });
            }
        });
        return false;
    }

</script>

<div id="Area">
    <div id="gridContent" align="center">
        @if (Model.Count > 0)
        {
            if (Model.First().RECODE_COUNT <= 10)
            {
                <script>
                    $(document).ready(function () {
                        $('.grid-footer').empty();
                        $('#AreaGrid').append('<tfoot><tr class = "grid-footer"><td colspan="6"></td></tr></tfoot>')
                    })
                </script>
            }
            <script>
                $(document).ready(function () {
                    
                    $('.grid-footer td').append('<div style="float:right;">Đang xem ' + '@Model.First().RowNumber' + ' - ' + '@Model.Last().RowNumber' + ' trên ' + '@Model.First().RECODE_COUNT' + ' bản ghi</div>')
                })
            </script>
            @grid.GetHtml(tableStyle: "table table-striped table-bordered table-hover dataTable no-footer",
                    htmlAttributes: new { id = "AreaGrid" },
                    headerStyle: "header",
                    alternatingRowStyle: "alt",
                    selectedRowStyle: "select",
                    rowStyle: "webgrid-row-style",
                    footerStyle: "grid-footer",
                    mode: WebGridPagerModes.All,
                    firstText: "|<<",
                    previousText: "|<",
                    nextText: ">|",
                    lastText: ">>|",
                    columns: grid.Columns(
                    grid.Column(
                        columnName: "STT",
                        header: "STT",
                        format: @<text>
                            @item.RowNumber
                        </text>,
                        canSort: false,
                        style: "clsSTT"
                    ),
                    grid.Column("AREA_CODE", "Mã địa bàn", format:
                    @<text>
                        <span id="spnAreaCode" class="display-mode">@item.AREA_CODE</span>
                    </text>,canSort: false, style: "clsAREA_CODE hidden-480"),

                    grid.Column("AREA_NAME", "Tên địa bàn", format:
                    @<text>
                        <div id="spnAreaName" class="hidden-580">@item.AREA_NAME</div>
                        <div class="display-580"><b>@item.AREA_NAME</b></div>
                        <div class="display-480">Mã địa bàn: @item.AREA_CODE</div>
                        <div class="display-580">Khu hành chính: @item.PROVINCE_NAME - @item.DISTRICT_NAME - @item.COMMUNE_NAME</div>
                    </text>,canSort: false, style: "clsAREA_NAME "),

                    grid.Column("ADM_UNIT", "Khu hành chính", format:
                    @<text>
                        <span id="spnAdminisUnitID" class="display-mode">@item.PROVINCE_NAME - @item.DISTRICT_NAME - @item.COMMUNE_NAME</span>
                    </text> ,canSort: false, style: "clsADM_UNIT hidden-580"),

                    grid.Column("DESCRIPTIONS", "Mô tả", format:
                    @<text>
                        <span id="spnDescriptions" class="display-mode" style="">@item.DESCRIPTIONS</span>
                    </text>,canSort: false, style: "clsDESCRIPTIONS hidden-780 autohidden"),
                    grid.Column("Thao tác", format:
                    @<text>
                        <div style="text-align:center;">
                            <div class="btn-group">
                                <a href="#" data-toggle="dropdown" class="btn btn-lg" style="margin:0px; padding:0px;">
                                    <div class="label label-info">
                                        <i class="fa fa-th"></i>
                                    </div>
                                </a>
                                <ul class="dropdown-menu no-angle pull-right right">
                                    <li>
                                        <a onclick="onMap('@item.AREA_CODE')" data-index="@item.AREA_CODE" style="cursor:pointer;"> <i class="fa fa-map-marker"></i> Xem bản đồ</a>
                                    </li>
                                    <li>
                                        <a onclick="onView('@item.AREA_ID')" data-index="@item.AREA_ID" style="cursor:pointer;"> <i class="fa fa-eye"></i> Xem thông tin</a>
                                    </li>
                                    <li>
                                        <a onclick="onEdit('@item.AREA_ID')" data-index="@item.AREA_ID" style="cursor:pointer;"> <i class="fa fa-pencil"></i> Sửa thông tin</a>
                                    </li>
                                    <li>
                                        <a onclick="onDelete('@item.AREA_ID')" data-index="@item.AREA_ID" style="cursor:pointer;"> <i class="fa fa-trash-o"></i> Xóa thông tin</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </text>, canSort: false, style: "clsAction")))

            <script type="text/javascript">
                $(function () {
                    $('.clsSTT').css('text-align', 'center').css('width', '30px');
                    $('.clsAREA_CODE').css('text-align', 'center');
                    var colsHeader = $('#gridContent th');
                    $(colsHeader[1]).addClass('hidden-480').css('text-align', 'center').css('width', '90px');
                    $(colsHeader[2]).addClass('hidden-480').css('text-align', 'center');
                    $(colsHeader[3]).addClass('hidden-580').css('text-align', 'center');
                    $(colsHeader[4]).addClass('hidden-780').css('text-align', 'center').css('width', '200px');
                    $(colsHeader[5]).css('text-align', 'center').css('width', '60px');
                });
            </script>
        }
        else
        {
            <div align="center"><h5>Không tìm thấy kết quả phù hợp</h5></div>
        }
    </div>
    <br /><br /><br />
</div>
